<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Warrior">
    <title>轮播图</title>
    <script src="./js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" type="" href="./css/bootstrap.min.css">
    <style>
        #jdzb_slideBox {
            width: 390px;
            height: 350px;
            position: relative;
        }

        .jdzb_imgBox {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        #jdzb_slideBox>.jdzb_imgBox>.show_jdzb {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            background-color: pink;
        }

        .jdzb_show {
            display: inline-block;
        }

        .jdzb_indicators {
            position: absolute;
            left: 140px;
            bottom: 20px;
        }

        .jdzb_buttons {
            position: relative;
        }

        #jdzb_prev{
            position: absolute;
            top: 170px;
            left: 0px;
        }
        #jdzb_next{
            position: absolute;
            top: 170px;
            right: 0px;
        }
        .jdzb_buttons>div{
            width:20px;
            height: 40px;
            background-color: black;
            opacity: 0.4;
        }
        .jdzb_buttons>div>p{
            color: white;
            width:20px;
            height: 40px;
            line-height: 40px;
        }

        .jdzb_indicators>span {
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: white;
        }

        .jdzb_indicators>span.current {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="jdzb_slideBox">
        <div class="jdzb_imgBox">
            <div class="jdzb_show show_jdzb">
                1
            </div>
            <div class="show_jdzb">
                2
            </div>
            <div class="show_jdzb">
                3
            </div>
            <div class="show_jdzb">
                2
            </div>
            <div class="show_jdzb">
                2
            </div>
        </div>
        <div class="jdzb_indicators">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="jdzb_buttons">
            <div id="jdzb_prev" ><p class="glyphicon glyphicon-menu-left"></p></div>
            <div id="jdzb_next" ><p class="glyphicon glyphicon-menu-right"></p></div>
        </div> 
    </div>
    <script>
        var jdzb_index = 0;
        var jdzb_timer = setInterval(jdzb_changeIndex, 2000);

        function jdzb_changeIndex() {
            jdzb_index = jdzb_index >= $('.show_huimai').length - 1 ? 0 : jdzb_index + 1;
            jdzb_changeImage();
        }

        function jdzb_changeImage() {
            $('.show_jdzb').eq(jdzb_index).fadeIn('fast').siblings().fadeOut('fast');
            $('.jdzb_indicators span').eq(jdzb_index).addClass('current').siblings().removeClass('current');
        }

        $('#jdzb_prev').click(function () {
            jdzb_index = jdzb_index <= 0 ? $('.show_jdzb').length - 1 : jdzb_index - 1;
            jdzb_changeImage();
        })

        $('#jdzb_next').click(function () {
            jdzb_changeIndex();
        })

        $('.jdzb_indicators span').hover(function(){
            clearInterval(jdzb_timer);
            jdzb_index = $(this).index();
            jdzb_changeImage();
        },function(){
            jdzb_timer = setInterval(jdzb_changeIndex,2000);
        })
        $('.jdzb_buttons div').hover(function(){
            clearInterval(jdzb_timer);
        },function(){
            jdzb_timer = setInterval(jdzb_changeIndex,2000);
        })
    </script>
</body>

</html>